<template>
    <van-field
        :style="style"
        label-width="3rem"
        v-model="form.phoneNum"
        :name="name"
        :placeholder="placeholder"
        :rules="rules"
    >
        <template #label>
            <div class="country" @click="show = true">
                <van-image
                    width="28px"
                    :src="flags[flag].icon"
                />
                <van-icon name="play" :class="{'play': true, 'start': show === true, 'end': show === false}" size="12"  />
            </div>
        </template>
    </van-field>
    <van-action-sheet
        v-model:show="show"
        :actions="flags"
        cancel-text="取消"
        close-on-click-action
        @select="onSelect"
    />
</template>

<script lang="ts" setup>
import { inject, onMounted, ref } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

const { form, rules, placeholder, name, style } = defineProps({ 
    form: {
        type: Object as () => {countryid: number, phoneNum: string}, //(string也可以是其他你自定义的接口)
        required: true, 
        default: {}
    },
    rules: {
        type: Array as () => Array<{}>, //(string也可以是其他你自定义的接口)
        required: true, 
        default: []
    },
    placeholder: {
        type: String as () => string, //(string也可以是其他你自定义的接口)
        required: true, 
        default: 'Phone Number'
    },
    name: {
        type: String as () => string, //(string也可以是其他你自定义的接口)
        required: true, 
        default: ''
    },
    style: {
        type: Object as () => object, //(string也可以是其他你自定义的接口)
        required: true, 
        default: {}
    },
});

const show = ref(false)

const flag = ref(0)
const flags: Array<{icon: any, name: string, countryid: number}> = store.state.country

const onSelect = (item: {icon: any, name: string, countryid: number}, index: number) => {
    flag.value = index
    setCountryid()
}

const setCountryid = () => {
    form.countryid = flags[flag.value].countryid
}

onMounted (()=>{
    setCountryid()
})

</script>

<style lang="less" scoped>
@keyframes playStart
{
    from {transform: rotate(90deg)}
    to {transform: rotate(270deg)}
}
 
@keyframes playEnd
{
    from {transform: rotate(270deg)}
    to {transform: rotate(90deg)}
}
.country {
    height: 28px;
    display: flex;
    align-items: center;
    img {
        display: inline-block;
    }
    .play {
        transform: rotate(90deg);
        margin-left: 5px;
        &.start {
            animation: playStart 0.5s;
            animation-fill-mode: forwards;
        }
        &.end {
            animation: playEnd 0.5s;
            animation-fill-mode: forwards;
        }
    }
}
</style>
